<!-- 余额明细 -->
<template>
  <view class="balan">
    <view class="balance" v-for="item in mx" :key="item.id">
      <view class="balan-left">
        <view class="balance_title">{{ item.title }}</view>
        <view class="balance_titme">{{ item.time }}</view>
      </view>
      <view
        class="balan-right"
        :style="{ color: item.id === 0 ? '#089090' : 'red' }"
        >{{ item.money }}</view
      >
    </view>
  </view>
</template>

<script setup>
import { ref } from "vue";
const mx = ref([
  { id: 0, title: "充值", time: "2022-01-30  08:12", money: "+20" },
  { id: 1, title: "消费", time: "2022-01-30  08:12", money: "-20" },
  { id: 0, title: "返现", time: "2022-01-30  08:12", money: "+20" },
]);
</script>

<style lang="scss">
.balan {
  width: 100%;
  height: 100vh;
  background-color: #e6f6f4;

  .balance {
    width: 95%;
    margin: auto;
    border-bottom: 1px solid silver;
    align-items: center;
    display: flex;
    justify-content: space-between;

    .balan-left {
      width: 75%;

      .balance_title {
        margin-top: 20rpx;
      }

      .balance_titme {
        color: silver;
        margin-top: 20rpx;
        margin-bottom: 40rpx;
      }
    }

    .balan-right {
      width: 15%;
    }
  }
}
</style>